<template>
  <el-dialog
    :visible.sync="visible"
    title="提示"
    :center="true"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="!detailLoading"
    :before-close="handleClose"
  >
    <div v-if="!detailLoading" class="pl-5">
      校验完成，已检验通过项目
      <span class="text-success count-label cursor-pointer" @click="handleClose">{{ pass }}</span>
      条， 异常项目
      <span class="count-label px-2 text-danger cursor-pointer" @click="goToError">
        {{ error }}
      </span>
      条， 请在异常处理对未通过项目进行处理
    </div>
    <div class="pl-5" v-else v-loading="loading">
      已导入
      {{ count }} 条数据，正在数据校验中，请稍等，校验未结束前请勿删除数据，校验未结束请勿继续导入
      <i class="fa fa-spinner fa-pulse fa-2x fa-fw" v-if="!loading && detailLoading"></i>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    channelType: {
      type: String,
      default: '0',
    },
    visible: Boolean,
    batchNo: String,
  },
  data() {
    return {
      params: { index: 1, size: 1, fields: ['import_batch_no'] },
      count: 0,
      loading: true,
      detailLoading: true,
      tableName: 'datum_one_county_industry',
      pass: 0,
      error: 0,
      hasFinishSync: true,
      syncTimer: null,
    }
  },
  computed: {
    productId() {
      return this.$route.query.id
    },
  },
  created() {},
  watch: {
    batchNo() {
      if (!this.batchNo) {
        return
      }
      this.getData()
    },
  },
  methods: {
    goToError() {
      if (+this.channelType === 1) {
        this.$router.push({
          path: '/res_index/limit/limit12/new/new',
          query: {
            id: this.productId,
            status: 1,
          },
        })
      } else {
        this.$router.push({
          path: '/res_index/limit/limit12/list/import',
          query: {
            id: this.productId,
            status: 1,
          },
        })
      }
    },
    getData() {
      this.fetchData({
        index: 1,
        size: 1,
        'import_batch_no.eq': this.batchNo,
      })
        .then(res => {
          this.count = res.data.totalCount
        })
        .finally(() => {
          this.loading = false
          this.getWait()
        })
    },
    async getWait() {
      await this.fetchData({
        ...this.params,
        'import_batch_no.eq': this.batchNo,
        'sync_status.eq': 0,
      }).then(res => {
        const total = (res && res.data && res.data.totalCount) || 0
        this.hasFinishSync = !!total
        if (!this.hasFinishSync) {
          this.clearSync()
          this.getInfo()
        } else if (this.syncTimer === null) {
          this.syncTimer = setInterval(() => this.getWait(), 3000)
        }
      })
    },
    clearSync() {
      if (this.syncTimer === null) return
      clearInterval(this.syncTimer)
      this.syncTimer = null
    },
    getInfo() {
      const getPass = this.fetchData({
        ...this.params,
        'import_batch_no.eq': this.batchNo,
        'import_status.eq': 1,
      })
      const getError = this.fetchData({
        ...this.params,
        'import_batch_no.eq': this.batchNo,
        'import_status.in': '2,3',
      })
      Promise.all([getPass, getError])
        .then(([pass, error]) => {
          this.pass = pass.data.totalCount || 0
          this.error = error.data.totalCount || 0
        })
        .finally(() => {
          this.$emit('success', true)
          this.detailLoading = false
        })
    },
    fetchData(params) {
      return this.$api.getData(this.$serviceName, this.tableName, params)
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.count-label {
  text-decoration: underline;
}
</style>
